<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>[CK] AMAP描画工具</title>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=3c33d0d62ec03becb04d1c67d1889739"></script>
</head>
<body style="display: flex; flex-direction: row" onload="init()">

<div class="control" style="align-items: flex-start">
    <h3 style="margin-left: 100px">[CK] AMAP描画工具</h3>

    <!-- 绘制点 -->
    <fieldset style="width:300px; background: lavender">
        <div>
            <div style="width: 100%">
                <button onclick="draw_points();" style="float: left">绘制点</button>
                <button onclick="clear_points()" style="float: right">清除所有</button>
            </div>
            <textarea id="points"
                      cols="50"
                      rows="10"
                      style="margin-top: 10px;resize:none;"
                      placeholder="格式: 123.456,34.567, 多个点请使用英文分号分割, 多组点请换行"></textarea>
        </div>
    </fieldset>

    <!-- 绘制线 -->
    <fieldset style="width:300px; margin-top: 10px; background: beige">
        <div>
            <div style="width: 100%">
                <button onclick="draw_line_red();" style="float: left">绘制红线</button>
                <button onclick="draw_line_green();" style="margin-left: 5px">绘制绿线</button>
                <button onclick="draw_line_blue();" style="margin-left: 5px">绘制蓝线</button>
                <button onclick="clear_line()" style="float: right">清除所有</button>
            </div>
            <textarea id="line"
                      cols="50"
                      rows="10"
                      style="margin-top: 10px;resize:none;"
                      placeholder="格式: 123.456,34.567, 点之间请使用英文分号分割, 多条线请使用英文|分割"></textarea>
        </div>
    </fieldset>

    <!-- 绘制圆 -->
    <fieldset style="width:300px; margin-top: 10px; background: thistle">
        <div>
            <div style="width: 100%">
                <button onclick="draw_circle_red();" style="float: left">绘制红圆</button>
                <button onclick="draw_circle_green();" style="margin-left: 5px">绘制绿圆</button>
                <button onclick="draw_circle_blue();" style="margin-left: 5px">绘制蓝圆</button>
                <button onclick="clear_circle()" style="float: right">清除所有</button>
            </div>
            <textarea id="circle"
                      cols="50"
                      rows="10"
                      style="margin-top: 10px;resize:none;"
                      placeholder="格式: 123.456,34.567,10000 中心点经度,中心点纬度,半径(米)，多个请换行"></textarea>
        </div>
    </fieldset>
</div>

<div style="align-items: flex-end; width: 100%; border: solid 1px black; margin: 25px 10px 0 10px">
    <div id="container" style="width: 100%; height: 100%"></div>
</div>

</body>

<!-- 地图操作 -->
<script>
    let map;
    let markers = [];
    let lines = [];
    let circles = [];

    function init() {
        map = new AMap.Map('container', {
            zoom: 8,
            center: [123.437666, 41.810997]
        });
    }

    function draw_points() {
        let point_str = document.getElementById("points").value;
        if (point_str.trim().length === 0) {
            return;
        }
        let points = point_str.split("\n");
        for (let i in points) {
            if (points[i].trim().length === 0) {
                continue;
            }
            let point = points[i].split(";");
            for (let j in point) {
            	let p = point[j].split(",");
                let marker = new AMap.Marker({
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [p[0], p[1]]
                });
                map.add(marker);
                markers.push(marker);
            }
        }
        map.setFitView();
    }

    function clear_points() {
        if (markers.length > 0) {
            map.remove(markers);
            map.setFitView();
        }
    }

    function draw_line_red() {
        draw_line("#ff0000");
    }

    function draw_line_green() {
        draw_line("#00ff00");
    }

    function draw_line_blue() {
        draw_line("#0000ff");
    }

    function draw_line(color) {
        let line_str = document.getElementById("line").value;
        if (line_str.trim().length === 0) {
            return;
        }
        let multi_line = line_str.split("\n");
        for (let m in multi_line) {
            let line_point_arr = multi_line[m].split("|");
            for (let i in line_point_arr) {
                let line = [];
                let line_point_single = line_point_arr[i].split(";");
                for(let k in line_point_single) {
                    let line_point = line_point_single[k].split(",");
                    line.push([line_point[0], line_point[1]]);
                }
                let polyline = new AMap.Polyline({
                    path: line,
                    strokeColor: color,
                    strokeWeight: 5,
                    strokeStyle: "solid",
                });
                map.add(polyline);
                lines.push(polyline);
            }
            map.setFitView();
        }
    }

    function clear_line() {
        if (lines.length > 0) {
            map.remove(lines);
            map.setFitView();
        }
    }

    function draw_circle_red() {
        draw_circle("#ff0000");
    }

    function draw_circle_green() {
        draw_circle("#00ff00");
    }

    function draw_circle_blue() {
        draw_circle("#0000ff");
    }

    function draw_circle(color) {
        let circle_str = document.getElementById("circle").value;
        if (circle_str.trim().length === 0) {
            return;
        }
        let multi_circle = circle_str.split("\n");
        for (let m in multi_circle) {
            let circle_prop_arr = multi_circle[m].split(",");
            let center_lon = circle_prop_arr[0];
            let center_lat = circle_prop_arr[1];
            let center_radius = circle_prop_arr[2];
            let circle = new AMap.Circle({
                center: new AMap.LngLat(center_lon,center_lat),
                radius: center_radius,
                fillColor: color,
                fillOpacity: 0,
                strokeColor: color,
                strokeWeight: 5
            });
            map.add(circle);
            circles.push(circle);
            let center_point = new AMap.Circle({
                center: new AMap.LngLat(center_lon,center_lat),
                radius: center_radius / 50,
                fillColor: color,
                fillOpacity: 1,
                strokeColor: color,
                strokeWeight: 1
            });
            map.add(center_point);
            circles.push(center_point);
        }
        map.setFitView();
    }

    function clear_circle() {
        if (circles.length > 0) {
            map.remove(circles);
            map.setFitView();
        }
    }
</script>

</html>
